<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>关于listen</title>
	<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" /> 
</head>
<style type="text/css">
	*{margin: 0;padding: 0;list-style: none;font-family: 'Microsoft Yahei';color: #fff}
	html{height: 100%;width: 100%;}
	body{height: 100%;width: 100%;}

    .onepage{width: 100%;height: 100%;background-color: #1e1f23;position: relative;}
	.main{width: 800px;height: 600px;margin: 0 auto;}
	.onepage .logo{width: 100px;height: 100px;margin: 0 auto;padding-top: 250px;}
	.logo img{width: 100px;height: 100px;border-radius: 50%}
	.title{text-align: center; color: #3385FF;padding-top: 50px;}

	.twopage{width: 100%;height: 100%;background-color:#910000;position: relative;}
	.twopage .left{width: 50%;height: 100%;float: left;text-align: center;position: relative;}
	.twopage .left img{display: block; width:150px;height:150px;position: absolute;position: absolute; left: 50%;top: 50%; border-radius: 50%;}
	.twopage .right{width: 50%;height: 100%;float: left;position: relative;}
	.twopage .right .line{width: 1px;height: 60%;background-color: #fff;top: 20%;position: absolute;left: 0;}
	.twopage .right .list{color: #fff;position: absolute;top: 50%;left: 10%;}
	.twopage .right .list li{line-height: 30px;font-size: 14px;}
	.threepage{width: 100%;height: 100%;background-color:#42A069;text-align: center; position: relative;}
    .threepage img{margin-top: 300px;border-radius: 10px;width: 150px;height: 150px;}
    .threepage p{line-height: 40px;}

    /*幽灵按钮*/
    .btn{width: 100px;height: 40px;border: 1px solid #666;position: absolute;bottom: 0;left: 48%;text-align: center;line-height:40px;cursor:pointer;color: #afafaf;letter-spacing: 4px}
    .btn:hover{color: #fff;border: 1px solid #fff}
 
</style>
<body>
	<div class="onepage">
		<div class="main">
			<div class="logo">
				<img src="./img/logo.png">
			</div>
			<h2 class="title">just listen</h2>
			<div class="person"></div>
		</div>

		<div class="btn">点我</div>
    </div>
	<div class="twopage">
		<div class="left">
			<img src="./img/me.png">
		</div>
		<div class="right">
			<div class="line"></div>
			<ul class="list">
				<li>2010.9-2013.9  井冈山大学</li>
				<li>2013.10-2014.2  北京~实习生</li>
				<li>2014.3-2014     厦门~前端</li>
			</ul>
		</div>
		<div class="btn">点我</div>
	</div>
	<div class="threepage">
		<img src="./img/qq.png">
		<p>少年，别忘了初心</p>
	</div>
</body>
</html>